<!--库存列表-->
<template>
    <div>
        <!--条件搜索表单-->
        <el-form :inline="true" :model="form" ref="queryRef" class="demo-form-inline">
            <el-form-item label="商品编号" prop="goodsCode">
                <el-input v-model="form.goodsCode" placeholder="请输入商品编号" clearable @input="getGoodsList"></el-input>
            </el-form-item>

            <el-form-item label="商品名称" prop="goodsName">
                <el-input v-model="form.goodsName" placeholder="请输入商品名称" clearable @input="getGoodsList" @keyup.enter.native="getGoodsList"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getGoodsList">查询</el-button>
                <el-button @click="resetForm('queryRef')">重置</el-button>
            </el-form-item>
        </el-form> <!--// 条件搜索表单-->

        <!--商品列表-->
        <el-table
                :data="goodsList"
                style="width: 100%"
                height="540">
            <el-table-column fixed label="" type="selection" width="55"></el-table-column>
            <el-table-column prop="goodsCode" label="商品编码" width="180" show-overflow-tooltip></el-table-column>
            <el-table-column prop="goodsName" label="商品名称" width="200"></el-table-column>
            <el-table-column prop="status" label="商品状态" width="120"></el-table-column>
            <el-table-column
                    label="操作"
                    width="250">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="success"
                            @click="handleAdd(scope.$index, scope.row)">进货</el-button>
                </template>
            </el-table-column>
        </el-table><!--/ 商品列表-->

        <!--分页插件-->
        <div>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageParam.pageNum"
                    :page-sizes="pageParam.sizes"
                    :page-size="pageParam.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageParam.total">
            </el-pagination>
        </div><!--/ 分页插件-->

        <!--编辑库存对话框-->
        <StockEdit v-if="editFlag" :goods="goods" :addFlag="addFlag" @close="handleEdit"></StockEdit>

    </div>
</template>

<script>
import API from "@/api/api";
import StockEdit from "../../../components/stockList/StockEdit";

export default {
    name: "StockList",
    components: {
        StockEdit,
    },
    data() {
        return {
            // 修改对话框标志位
            editFlag: false,
            // 进货按钮标志位
            addFlag: false,
            // 用于组件数据传输
            goods: {},
            // 条件查询-展示的表单
            form: {
                goodsCode: '',
                goodsName: '',
            },
            // 商品列表
            goodsList: [],
            // 分页参数
            pageParam: {
                pageNum: 1,
                pageSize: 10,
                total: 0,
                sizes: [5, 10, 50, 100, 200],
            },
            // 商品状态
            status: [
                {value: 1, label: '可用'},
                {value: 0, label: '不可用'}
            ],
            // 单位
            unit: [

            ],
        }
    },
    mounted() {
        this.getGoodsUnit();
        this.getGoodsList();
    },
    methods: {
        // 查询库存
        getStockList() {

        },
        // 重置表单
        resetForm(ref) {
            this.$refs[ref].resetFields();
        },
        // 编辑-操作按钮
        handleEdit(index, row) {
            this.editFlag = !this.editFlag;
            this.addFlag = false;
            this.goods = row;
            console.log(index, row);
        },
        // 进货-操作按钮
        handleAdd(index, row) {
            this.editFlag = !this.editFlag;
            this.addFlag = true;
            this.goods = row;
            console.log(index, row);
        },
        // 商品列表查询
        getGoodsList() {

            // let goodsQuery = JSON.parse(JSON.stringify(this.form));
            let goodsQuery = {
                param: JSON.parse(JSON.stringify(this.form))
            }

            goodsQuery.pageNum = this.pageParam.pageNum;
            goodsQuery.pageSize = this.pageParam.pageSize;
            console.log(goodsQuery, '条件查询param');
            let url = API.goods.selectList;
            this.$post(url, goodsQuery).then(res => {
                let data = res.data;
                console.log(data.list, '商品列表查询响应----------');

                if (data.success) {
                    this.goodsList = data.data.list;
                    this.goodsList.map(item => {
                        item.status = item.status === 1|'1'? '可用':'不可用';
                    });
                    console.log(this.goodsList, 'goodsList-------------');
                    this.pageParam.total = data.data.total;
                }
            })
        },
        // 单位查询
        getGoodsUnit() {
            let url = API.unit.selectUnitList;
            this.$get(url, {}).then(res => {
                let data = res.data;
                if (data.success) {
                    this.unit = data.data.list;
                }
            }).catch( err => {
                this.$message.error("请求失败!");
            })
        },
        // 分页
        handleSizeChange(val) {
            this.pageParam.pageSize = val;
            this.getGoodsList();
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.pageParam.pageNum = val;
            this.getGoodsList();
            console.log(`当前页: ${val}`);
        }
    }
}
</script>

<style scoped>

</style>
